<template>
  <div class="app-container">
    <div class="content-main">
      <div v-loading="loading" class="form-table-box">
        <el-form ref="infoForm" :rules="infoRules" :model="infoForm" label-width="120px">
          <el-form-item label="班级名称" prop="className">
            <el-input v-model="infoForm.className" />
          </el-form-item>
          <el-form-item label="所在门店" prop="storeId">
            <el-select v-model="infoForm.storeId" placeholder="请选择" @change="selectStore">
              <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
            </el-select>
          </el-form-item>
          <el-form-item label="班主任" prop="headTeacherId">
            <el-select v-model="infoForm.headTeacherId" :disabled="!infoForm.storeId" placeholder="请选择" @change="selectTeacher">
              <el-option v-for="item in teacherOptions" :key="item.storeId" :label="item.teacherName" :value="item.teacherId" />
            </el-select>
          </el-form-item>
          <el-form-item label="简介" prop="introduction">
            <el-input v-model="infoForm.introduction" :rows="3" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitInfo">提交</el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  createClass
} from '@/api/class/index'
import {
  getStoreLsit
} from '@/api/store/store'
import {
  fetchList,
  deleteTeacher
} from '@/api/teacher'
export default {
  data() {
    return {
      loading: false,
      infoForm: {
        classId: '',
        className: '',
        storeId: '',
        storeName: '',
        headTeacherId: '', // headTeacherId
        headTeacherName: '', // 班主任
        introduction: '' // 班级介绍
      },
      storeOptions: [],
      teacherOptions: [],
      infoRules: {
        className: [{
          required: true,
          message: '请输入班级名称',
          trigger: 'blur'
        }],
        headTeacherId: [{
          required: true,
          message: '请选择班主任',
          trigger: 'blur'
        }],
        storeId: [{
          required: true,
          message: '请选择门店',
          trigger: 'change'
        }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getList() {
      getStoreLsit({
        index: 0,
        size: 100
      }).then(response => {
        this.storeOptions = response.data.data.content
      })
    },
    getTeacherList() {
      fetchList({
        index: 0,
        size: 100,
        storeId: this.infoForm.storeId
      }).then(response => {
        this.teacherOptions = response.data.data.content
      })
    },
    onSubmitInfo() {
      const that = this
      console.log(that.infoForm)
      that.$refs['infoForm'].validate(valid => {
        if (valid) {
          that.loading = true
          createClass(that.infoForm)
            .then(res => {
              that.$message({
                type: 'success',
                message: '保存成功'
              })
              that.loading = false
              that.$router.push({
                name: 'classList'
              })
            })
            .catch(() => {
              that.loading = false
            })
        } else {
          return false
        }
      })
    },
    selectStore(v) {
      this.infoForm.storeName = this.storeOptions.filter((item) => {
        return v == item.storeId
      })[0].storeName
	  this.infoForm.headTeacherId = ''
	  this.infoForm.headTeacherName = ''
      this.getTeacherList()
    },
    selectTeacher(v) {
      this.infoForm.headTeacherName = this.teacherOptions.filter((item) => {
        return v == item.teacherId
      })[0].headTeacherName
    }
  }
}
</script>

<style>
	.image-uploader {
		height: 105px;
	}

	.image-uploader .el-upload {
		border: 1px solid #d9d9d9;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.image-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 187px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader .image-show {
		width: 187px;
		height: 105px;
		display: block;
	}

	.image-uploader.new-image-uploader {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-show {
		width: 165px;
		height: 105px;
		display: block;
	}

	.courseList {
		border: 1px solid #dadada;
		padding: 20px;
	}

	.couseInput {
		width: 100px;
	}

	.courseItem {
		display: flex;
		margin-bottom: 20px;
	}

	.courseItem span {
		padding-left: 4px;
	}

	.addBtn {
		display: flex;
		justify-content: center;
	}

	.delTxtBtn,
	.delTxtBtn:hover,
	.delTxtBtn:active {
		color: #f56c6c;
	}
</style>
